<template>
  <div class="">
    <div class="al">
      <div class="fan" @click="adds"></div>
      <div id="renqi">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in detail" :key="item.id">
            <img :src="detail.pic" alt="" />
          </van-swipe-item>
        </van-swipe>
        <div>
          <p>{{ detail.name }}</p>
          <p></p>
          <div>
            <p>
              低价<br />
              <span>￥{{ detail.minPrice }}</span>
            </p>
            <p>原价{{ detail.originalPrice }}</p>
            <p>库存{{ detail.views }}</p>
          </div>
        </div>
      </div>
      <ul id="shop_foot">
        <li>
          <i class="el-icon-service"></i>
        </li>
        <li>
          <i class="van-icon van-icon-shopping-cart-o"></i>
        </li>
        <li>
          <i class="xinone van-icon van-icon-star-o"></i>
        </li>
        <li>立即购买</li>
        <li @click="change">加入购物车</li>
        <van-action-sheet v-model="show" id="yang" title="商品样式">
          <div class="content" >
            <div class="vv_tan">
              <img :src="detail.pic" alt="" class="picimg" />
              <div>
                <p>{{ detail.name }}</p>
                <p>￥{{ detail.minPrice }}</p>
              </div>
            </div>
            <template>
              <van-stepper v-model="detail.num" @change="changes" class="bu" />
            </template>
            <div>
              <p class="goucar" @click.stop="add(detail)">加入购物车</p>
            </div>
          </div>
        </van-action-sheet>
      </ul>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      show: false,
      detail: this.$route.query.obj,
    };
  },
  mounted() {},
  methods: {
    adds() {
      this.$router.go(-1);
    },
    add(detail) {
      this.$store.commit("add", detail);
      Toast("添加成功");
    },
    change() {
      this.show = true;
    },
    changes() {
      this.$store.commit("change");
    },
  },
};
</script>

<style lang='scss'>
.fan {
  width: 0.36rem;
  height: 0.36rem;
  padding: 0.03rem;
  border-radius: 50%;
  border: 0.02rem solid #ffffff;
  position: fixed;
  left: 0.2rem;
  top: 0.2rem;
  text-align: center;
  line-height: 0.36rem;
  z-index: 123;
}
.al {
  padding-bottom: 0.68rem;
}
.my-swipe img {
  width: 100%;
  height: 450px;
}
#renqi > div:nth-of-type(2) {
  width: 7.3rem;
  height: 1.5rem;
  background: #ffffff;
  padding-left: 0.2rem;
  border-bottom: 0.14rem solid #f5f5f5;
}
#renqi > div:nth-of-type(2) > p:nth-of-type(1) {
  font-size: 0.32rem;
  color: #464646;
  margin-top: 0.3rem;
}
#renqi > div:nth-of-type(2) > div {
  display: flex;
  margin-top: 0.2rem;
}
#renqi > div:nth-of-type(2) > div > p:nth-of-type(1) {
  font-size: 0.25rem;
  color: #cc0c0c;
  width: 1.5rem;
}
#renqi > div:nth-of-type(2) > div > p:nth-of-type(1) span {
  font-size: 0.3rem;
}
#renqi > div:nth-of-type(2) > div > p:nth-of-type(2) {
  font-size: 0.2rem;
  color: #b8b8b8;
  margin-top: 0.06rem;
  width: 3.4rem;
}
#renqi > div:nth-of-type(2) > div > p:nth-of-type(3) {
  font-size: 0.28rem;
  color: #b8b8b8;
  margin-top: 0.06rem;
}
#shop_foot {
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  display: flex;
  justify-content: space-between;
  position: fixed;
  left: 0;
  bottom: 0;
  font-size: 0.4rem;
  background: white;
  // -webkit-box-shadow: 0 0 5px 1px #bebebe;
  box-shadow: 0 0 5px 1px #bebebe;
}
#shop_foot li {
  width: 0.8rem;
  height: 1rem;
  line-height: 1rem;
  border-right: 0.01rem solid #e9e9e9;
  border-top: 0.01rem solid #e9e9e9;
  text-align: center;
  align-items: center;
  cursor: pointer;
}
#shop_foot > li:nth-of-type(4) {
  width: 1.8rem;
  line-height: 1rem;
  font-size: 0.2rem;
}
#shop_foot > li:nth-of-type(5) {
  width: 1.8rem;
  font-size: 0.2rem;
  line-height: 1rem;
  background: #b7282e;
  color: white;
}
.picimg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
  margin-left: 0.2rem;
  margin-top: 0.2rem;
}
.goucar {
  width: 100%;
  height: 0.8rem;
  text-align: center;
  line-height: 0.8rem;
  font-size: 0.22rem;
  color: white;
  background: #b7282e;
}
.vv_tan {
  height: 3.23rem;
  border-bottom: 0.01rem solid #e9e9e9;
  display: flex;
  font-size: 0.25rem;
}
.bu {
  position: fixed;
  right: 10px;
  bottom: 50px;
}
#yang {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
</style>
